<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.css" />
    <!-- 引入模板库文件 -->
    <script src="./template-web.js"></script>
</head>

<body style="padding: 15px;">
    <!-- 添加图书的Panel面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">

            <form action="" id="formAddLib">
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名" name="bookname">
                </div>

                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者" name="author">
                </div>

                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社" name="publisher">
                </div>
                <button id="btnAdd" class="btn btn-primary" type="submit">添加</button>
            </form>



        </div>
    </div>


    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>

        <script type="text/html" id="lib-tpl">
            {{each data}}
            <tr>
                <td>{{$value.id}}</td>
                <td>{{$value.bookname}}</td>
                <td>{{$value.author}}</td>
                <td>{{$value.publisher}}</td>
                <td><a href="javascript:;" class='del' data-id="{{$value.id}}">删除</a></td>
            </tr>
            {{/each}}
        </script>
    </table>


    <!-- 导入jQuery库文件 -->
    <script src="./jquery.js"></script>
    <script>
        $(function () {

            // 1.获取图书列表并渲染到页面
            getBookList();

            function getBookList() {
                // 发送请求
                $.ajax({
                    type: 'get',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    success: function (res) {
                        console.log(res);
                        if (res.status !== 200) {
                            return alert('获取评论失败')
                        }
                        var htmlStr = template('lib-tpl', res);
                        console.log(htmlStr);
                        $('#tb').html(htmlStr);
                    }
                })
            }

            //3 添加图书
            $('#formAddLib').on('submit', function (e) {
                //阻止表单的默认提交行为
                e.preventDefault();
                //收集数据
                var data = $(this).serialize();
                //通过这个方法产生了一个可以用于ajax的字符串
                // 使用ajax提交数据
                $.ajax({
                    type: 'post',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: data,
                    success: function (res) {
                        //判断是否成功
                        if (res.status !== 201) {
                            return alert('添加图书失败')
                        }
                        //重新渲染数据
                        getBookList();
                        //清空表单项
                    }
                })
            })


            //删除功能
            //给删除按钮注册点击事件(事件委托)
            $('#tb').on("click", '.del', function () {
                if (confirm('您确定要删除书籍吗')) {
                    var id = $(this).attr("data-id");
                    //发送请求 删除书记的接口
                    $.get('http://www.liulongbin.top:3006/api/delbook', {
                        id: id
                    }, function (res) {
                        if (res.status !== 200) {
                            return alert('删除图书失败');
                        }
                        //重新获取图书 重新渲染
                        getBookList();
                    })
                }
            })
        })
    </script>

</body>

</html>